<include file="__THEME__/header" />
<link href="../Public/css/colleague.css" rel="stylesheet" type="text/css" />
<link href="../Public/css/space.css" rel="stylesheet" type="text/css" />
<div class="contents lbg B"> <include file="../Public/home_left" />
<style>.copylist dd{ padding:0;}</style>
  <script>
	function checkform(){
		if(!$('#gid').val()){
			alert("{:L('no_group_selected')}");
			return false;
		}
		if(!$('#content').val()){
			alert("{:L('no_empty_content')}");
			return false;
		}
	}
	//添加分组
	function doaddgroup(){
		var html = '<div style="width:300px;height:100px;"><ul style="margin:10px">'
			     + '<li>'+"{:L('group_name')}"+'：<input type="text" id="ad_groupname"></li><li id="ad_groupmessage" style="color:red"></li></ul></div>'
			     + '<div style="display: block;" id="tb_content_list" class="tb_button_list">'
			     + '<p><input type="button" value="{:L("ok")}" name="" onclick="doaddgroups()" id="tb_button_ok" class="mr10"/><input type="button" value="{:L("cancel")}" id="tb_button_no" onclick="$.tbox.close()" name="" class="mr10"/>'
			     + '</p></div>';
		$.tbox.popBox(html,"{:L('add_group')}");
	}
	

	
	function doaddgroups(){
		var groupname = $.trim($('#ad_groupname').val());
		if(groupname){
			$.post('__APP__&mod=colleague&act=managegroup',{groupname:groupname,type:'add'},function(txt){
				txt = eval('('+txt+')');
				if(txt.status){
					$("select[name='gid']").append('<option selected value="'+txt.info+'">'+groupname+'</option>').attr('selected',true);					
					$.tbox.close();
				}else{
					$('#ad_groupmessage').html(txt.info);
				}
			});
		}else{
			$.tbox.no("{:L('no_empty_group')}","{:L('fail_add')}");
		}
	}			
</script>
  <div class="contents_min w787">
    <div class="write_info">
      <div class="mb10">
        <h3 class="tit_h3">{:L('my_contact')}</h3>
      </div>
      <div class="list_cate_nav">
        <div class="tab">
          <!-- 切换标签 begin  -->
          <ul>
            <li><span><a href="__URL__&act=index">{:L('nav_index')}</a></span></li>
            <li class="on"><span><a href="__URL__&act=add">{:L('nav_add')}</a></span></li>
            <li><span><a href="__URL__&act=search">{:L('nav_search')}</a></span></li>
            <li><span><a href="__URL__&act=track">{:L('nav_track')}</a></span></li>
            <li><span><a href="__URL__&act=followYou">{:L('nav_followyou')}</a></span></li>
            <li><span><a href="__URL__&act=followMe">{:L('nav_followme')}</a></span></li>
          </ul>
        </div>
        <div class="friendBox">
          <form action="" method="post" onsubmit="return checkform()" />
          <div class="FList" style="width:800px;">
            <h2>{:L('add_to_contact')}</h2>
            <ul style="margin-top: 20px;" id="step_1">
              <li id="two" class="pl10">
                <div class="L">
                  <textarea name="content" id="content" class="in_put mr20" rows="15" style="width:415px"></textarea>
                </div>
                <div class="clewbox L">
                	<div class="clewbox_bg">{:L('tip')}: </div>
                    <div class="clewbox_bg_b">{:L('tip_add_1')}</div>
                </div>
                <div class="C"></div>
              </li>
              <li>
                <div class="L cl06 pl10"><span class="cl02">{:L('add_to_group')}: </span>
                  <select name="gid" id="gid" class="mr5" style="border: 1px solid rgb(153, 153, 153); padding: 2px 5px; text-align: left;">
                    <volist id="vo" name="grouplist">
                      <option value={$key}>{$vo}</option>
                    </volist>
                  </select>
                  【<a href="javascript:void(0)" onclick="doaddgroup()">{:L('add_group')}</a>】</div>
                <div class="C"></div>
              </li>
              <li class="mt5">
                <div class="L pl10">
                  <input type="button" onclick="donext()" name="botton2" class="btn_sea" value="{:L('next')}">
                </div>
                <div class="C"></div>
              </li>
            </ul>
            <ul style="margin-top: 10px;display:none;" id="step_2">
              <li>
                <div class="copylist L" style="width:460px;">
                  <div class="tit_t">
                    <div class="L" style="width:20px;">&nbsp;</div>
                    <div class="L" style="width:270px;">{:L('notes')}</div>
                    <div class="L" style="width:120px;">{:L('col_num')}</div>
                    <div class="L" style="width:30px;"> </div>
                    <div class="C"></div>
                  </div>
                  <div id="noteslist"> </div>
                  <div class="tit_C" id="edit_listnode" style="display:none;background-color:#e5e5e5;position:absolute;">
                    <div class="L" style="width:20px;">&nbsp;
                      <input type="hidden" id="edit_id" class="text"/>
                    </div>
                    <div class="L" style="width:260px;" id="edit_notesmail">aaaaa</div>
                    <div class="L" style="width:120px;" >
                      <input type="text" id="edit_uname" class="text mt5" style="width:100px;"/>
                    </div>
                    <div class="L" style="width:60px;"><a href="javascript:void(0)" onclick="doedit()">{:L('ok')}</a>&nbsp;&nbsp; <a href="javascript:void(0)" onclick="$('#edit_listnode').hide()">{:L('cancel')}</a></div>
                    <div class="C"></div>
                  </div>
                </div>
                <div class="clewbox L">
                	<div class="clewbox_bg">{:L('tip')}: </div>
                    <div class="clewbox_bg_b">{:L('tip_add_2')}</div>
                </div>
                <div class="C"></div>
              </li>
              <li class="mt10">
                <input type="button" onclick="dopre()" class="btn_sea mr5" value="{:L('return')}" />
                <input type="submit" class="btn_sea" value="{:L('next')}" />
              </li>
			  
            </ul>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="C"></div>
</div>
<script>
	$(document).ready(function(){
		$("div[rel='listnode']").live('mouseover',function(){
			$(this).css('background-color','#EEF0EF');
		});
		$("div[rel='listnode']").live('mouseout',function(){
			$(this).css('background-color','');
		});		
	})
	
	function donext(){
		$.post("{:U('home/Colleague/parsedata')}",{content:$('#content').val()},function(txt){
			txt = eval("("+txt+")");
			var html = '';
			if( txt ){
				$.each(txt.format,function(i,n){
				   html +=  '<div class="tit_C" id="listnode_'+i+'" rel="listnode">'
				   		+   '     <div class="L" style="width:20px;">&nbsp;<input type="hidden" name="uname[]" id="unamevalue_'+ i +'" value="'+ n.uname +'"></div>'
	                    +   '     <div class="L" style="width:270px;" id="notesmail_'+ i +'">'
	                    +         	n.notesmail
	                    +   '     </div>'
	                    +   ' 	<div class="L " style="width:120px;" id="uname_'+ i +'">'
						+       	n.uname
						+	'	</div>'
	                    +   ' 	<div class="L mt5" style="width:40px;">'
						+	'	<a class="ico_edi L mr10" href="javascript:void(0)" onclick="edithtml('+ i +')" title="{:L("edit")}"></a><a class="del" href="javascript:void(0)" onclick="dodel('+ i +')" title="{:L("delete")}"></a>'
						+	'	</div>'
	                    +   '     <div class="C"></div>'
	                    +   '</div>';
				});
				$('#noteslist').html(html);
				$('#step_1').hide();
				$('#step_2').show();
			}else{
				alert("{:L('tip_add_3')}");
			}
		});
	}
	
	function edithtml(i){
		$("#edit_notesmail").html( $("#notesmail_"+i).html() );
		$("#edit_uname").val( $("#unamevalue_"+i).val() );
		$("#edit_id").val( i );
		var offset = $("#listnode_"+i).offset();
		$("#edit_listnode").css("left" , offset.left);
		$("#edit_listnode").css("top" , offset.top);
		$("#edit_listnode").show();
		
	}
	
	function doedit(){
		var id = $("#edit_id").val();
		$("#uname_"+id).html( $('#edit_uname').val() );
		$("#unamevalue_"+id).val( $('#edit_uname').val() );
		$('#edit_listnode').hide();
	}
	
	function dodel(id){
		$("#listnode_"+id).remove();
	}
	
	function dopre(){
		$('#step_1').show();
		$('#step_2').hide();
	}
</script>
<include file="__THEME__/footer" /> 